<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        用户名：<input type="text" v-model="loginInfo.username"> <br>
        密码：<input type="text" v-model="loginInfo.password"> <br>
        验证码：<input type="text" v-model="loginInfo.code"> 
                <img :src="img" @click="captchaLoad">   <br>
                <button type="button" @click="login">登录</button>
        </br>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                loginInfo: {
                    username: '',
                    password: '',
                    code: '',
                    uuid: ''
                },
                img: ''
            },
            mounted(){
                this.captchaLoad()
            },
            methods: {
                async captchaLoad(){
                    const {data:res} = await axios.get('http://localhost:8080/captchaImage')
                    this.img = res.data.img
                    this.loginInfo.uuid = res.data.uuid
                },
                async login(){
                    const {data:res} = await axios.post('http://localhost:8080/login', this.loginInfo)
                    if(res.status !== 200){
                        return alert(res.msg)
                    }

                    // 将用户信息保存到本地
                    localStorage.setItem('userInfo', JSON.stringify(res.data))
                    location.href = 'main.html'
                }
            }
        })
    </script>
</body>
</html>